<template>
  <view class="container">
    
    <view class="bg-layer">
      <view class="bg-text">LONETRAIL</view>
      
      <view class="poly-scene">
        <view class="cube">
          <view class="face f1"></view><view class="face f2"></view><view class="face f3"></view>
          <view class="face f4"></view><view class="face f5"></view><view class="face f6"></view>
        </view>
        <view class="cube-inner">
          <view class="face f1"></view><view class="face f2"></view><view class="face f3"></view>
          <view class="face f4"></view><view class="face f5"></view><view class="face f6"></view>
        </view>
      </view>
    </view>

    <view class="login-panel">
      <view class="deco-bar">
        <view class="bar b-r" :style="{ flex: barFlex.r }"></view>
        <view class="bar b-y" :style="{ flex: barFlex.y }"></view>
        <view class="bar b-g" :style="{ flex: barFlex.g }"></view>
      </view>

      <view class="header">
        <view class="title">ACCESS</view>
        <view class="subtitle">RHODES ISLAND MOBILE TERMINAL</view>
      </view>

      <view class="form-area">
        
        <view class="input-group" :class="{ active: focusField === 'phone' }">
          <text class="label">PHONE NUMBER // 手机号</text>
          <input 
            class="input-field" 
            v-model="form.phone"
            type="number"
            placeholder="ENTER NUMBER" 
            placeholder-class="ph-style"
            @focus="onInputFocus('phone')" 
            @blur="onInputBlur" 
          />
        </view>

        <view class="input-group" :class="{ active: focusField === 'code' }">
          <text class="label">VERIFICATION CODE // 验证码</text>
          <view class="code-row">
            <input 
              class="input-field code-input" 
              v-model="form.code"
              type="number"
              placeholder="••••••" 
              placeholder-class="ph-style"
              @focus="onInputFocus('code')" 
              @blur="onInputBlur" 
            />
            <button 
              class="btn-get-code" 
              :class="{ disabled: btndisabled }"
              @click="handleSendCode" 
              :disabled="btndisabled"
            >
              {{ btnContent }}
            </button>
          </view>
        </view>
      </view>

      <view class="btn-submit" @click="handleBind" hover-class="btn-hover" hover-stay-time="100">
        <view class="btn-progress" :style="{ width: loading ? '100%' : '0%' }"></view>
        <text class="btn-text">{{ loading ? 'PROCESSING...' : 'CONFIRM' }}</text>
      </view>

      <view class="footer">
        <view>SYSTEM VERSION 4.5.0</view>
        <view>C.W. SATELLITE NETWORK</view>
      </view>
    </view>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { sendSMSCode, bindPhone } from '../../api/auth/user'

export default {
  data() {
    return {
      // === 业务数据 ===
      sencond: 60,
      btndisabled: false,
      btnContent: 'SEND CODE',
      form: {
        phone: '',
        code: ''
      },
      loading: false,

      // === UI 交互数据 ===
      barFlex: { r: 1, y: 1, g: 1 },
      focusField: ''
    }
  },
  methods: {
    onInputFocus(field) {
      this.focusField = field
      if (field === 'phone') {
        this.barFlex = { r: 4, y: 1, g: 1 }
      } else if (field === 'code') {
        this.barFlex = { r: 1, y: 4, g: 1 }
      }
    },
    onInputBlur() {
      this.focusField = ''
      this.barFlex = { r: 1, y: 1, g: 1 }
    },

    handleSendCode() {
      if (!this.form.phone) {
        this.$refs.uToast.show({ type: "error", message: "请输入手机号" })
        return
      }
      sendSMSCode(this.form.phone).then(res => {
        if (res.code == 200) {
          this.$refs.uToast.show({ type: "success", message: "发送成功" })
          this.btndisabled = true
          this.btnContent = `RETRY (${this.sencond})`
          let interval = setInterval(() => {
            this.sencond--
            this.btnContent = `RETRY (${this.sencond})`
            if (this.sencond < 0) {
              clearInterval(interval)
              this.btndisabled = false
              this.btnContent = 'SEND CODE'
              this.sencond = 60
            }
          }, 1000)
        } else {
          this.$refs.uToast.show({ type: "error", message: res.message })
        }
      })
    },

    handleBind() {
      if (!this.form.phone || !this.form.code) {
        this.$refs.uToast.show({ type: "error", message: "请填写完整信息" })
        return
      }
      this.loading = true
      // 模拟一点视觉延迟
      setTimeout(() => {
        bindPhone(this.form.phone, this.form.code).then(res => {
          this.loading = false
          if (res.code == 200) {
            this.barFlex = { r: 0, y: 0, g: 10 } // 全绿反馈
            this.$refs.uToast.show({ type: "success", message: "绑定成功" })
			uni.switchTab({
								          url: '/pages/home/home',
								          fail: (err) => { console.error('switchTab failed:', err); }
								        });
          } else {
            this.$refs.uToast.show({ type: "error", message: res.message })
          }
        }).catch(() => { this.loading = false })
      }, 500)
    }
  }
}
</script>

<style lang="scss">
/* === 核心变量 === */
page {
  --lt-bg: #E0E2E5;
  --lt-card: rgba(255, 255, 255, 0.94);
  --lt-text: #1a1a1a;
  --lt-sub: #666;
  --c-red: #9A332D;
  --c-yellow: #E6A73C;
  --c-green: #79BBA9;
  background-color: var(--lt-bg);
  font-family: monospace;
}

.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  perspective: 1200rpx; /* 3D透视 */
}

/* === 1. 背景层 === */
.bg-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  background: linear-gradient(180deg, #d0d2d5 0%, #E0E2E5 100%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  /* 移除 align-items: center，方便子元素自由定位 */
}

.bg-text {
  position: absolute;
  top: 80rpx; left: 50%;
  transform: translateX(-50%);
  font-size: 160rpx;
  font-weight: 900;
  color: rgba(0,0,0,0.03);
  letter-spacing: -4rpx;
  white-space: nowrap;
}

/* === 2. 3D 立方体 (底部定位) === */
.poly-scene {
  position: absolute;
  top: auto;        /* 清除顶部定位 */
  bottom: 140rpx;   /* 沉底 */
  left: 50%;
  width: 400rpx; 
  height: 400rpx;
  margin-left: -200rpx; /* 水平居中 */
  transform-style: preserve-3d;
  z-index: -1;
  opacity: 0.8;
}

.cube, .cube-inner {
  position: absolute; width: 100%; height: 100%; transform-style: preserve-3d;
}
.cube { animation: rotateOuter 20s linear infinite; }
.cube-inner { top: 25%; left: 25%; width: 50%; height: 50%; animation: rotateInner 15s linear infinite reverse; }

.face {
  position: absolute; width: 100%; height: 100%;
  border: 2rpx solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}
.cube-inner .face { border: 2rpx dashed rgba(121, 187, 169, 0.4); background: rgba(121, 187, 169, 0.08); }

/* 立方体面变换 */
.cube .face:nth-child(1) { transform: translateZ(200rpx); }
.cube .face:nth-child(2) { transform: rotateY(90deg) translateZ(200rpx); }
.cube .face:nth-child(3) { transform: rotateY(180deg) translateZ(200rpx); }
.cube .face:nth-child(4) { transform: rotateY(-90deg) translateZ(200rpx); }
.cube .face:nth-child(5) { transform: rotateX(90deg) translateZ(200rpx); }
.cube .face:nth-child(6) { transform: rotateX(-90deg) translateZ(200rpx); }

.cube-inner .face:nth-child(1) { transform: translateZ(100rpx); }
.cube-inner .face:nth-child(2) { transform: rotateY(90deg) translateZ(100rpx); }
.cube-inner .face:nth-child(3) { transform: rotateY(180deg) translateZ(100rpx); }
.cube-inner .face:nth-child(4) { transform: rotateY(-90deg) translateZ(100rpx); }
.cube-inner .face:nth-child(5) { transform: rotateX(90deg) translateZ(100rpx); }
.cube-inner .face:nth-child(6) { transform: rotateX(-90deg) translateZ(100rpx); }

@keyframes rotateOuter { 0% { transform: rotate3d(0,0,0,0); } 100% { transform: rotate3d(1,0.5,0.2,360deg); } }
@keyframes rotateInner { 0% { transform: rotate3d(0,0,0,0); } 100% { transform: rotate3d(1,0.5,0.2,-360deg); } }

/* === 3. 登录面板 (顶部定位) === */
.login-panel {
  position: absolute;
  top: 240rpx; /* 靠上 */
  left: 40rpx; right: 40rpx;
  background: var(--lt-card);
  backdrop-filter: blur(20px);
  padding: 60rpx 50rpx;
  /* 切角 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40rpx), calc(100% - 40rpx) 100%, 0 100%);
  box-shadow: 0 20rpx 60rpx rgba(0,0,0,0.08);
  z-index: 10;
}

.deco-bar {
  position: absolute; top: 0; left: 0; width: 100%; height: 8rpx; display: flex;
}
.bar { height: 100%; transition: flex 0.4s ease; }
.b-r { background: var(--c-red); }
.b-y { background: var(--c-yellow); }
.b-g { background: var(--c-green); }

.header { margin-bottom: 60rpx; }
.title {
  font-size: 80rpx; font-weight: 900; color: var(--lt-text);
  line-height: 0.9; letter-spacing: 2rpx;
  transform: scaleY(1.1); transform-origin: bottom left;
  display: inline-block;
}
.subtitle { margin-top: 10rpx; font-size: 24rpx; color: var(--lt-sub); letter-spacing: 2rpx; }

/* 表单样式 */
.input-group { margin-bottom: 50rpx; }
.label { display: block; font-size: 24rpx; font-weight: bold; color: var(--lt-text); margin-bottom: 16rpx; }
.input-field {
  width: 100%; height: 90rpx;
  background: rgba(0,0,0,0.04);
  border-bottom: 4rpx solid #ccc;
  padding: 0 24rpx; font-size: 32rpx;
  box-sizing: border-box; transition: all 0.3s;
}
.ph-style { color: #aaa; font-size: 28rpx; }
.input-group.active .input-field { background: rgba(0,0,0,0.08); border-bottom-color: var(--c-green); }

/* 验证码行 */
.code-row { display: flex; align-items: flex-end; }
.code-input { flex: 1; margin-right: 20rpx; }

.btn-get-code {
  height: 90rpx; padding: 0 20rpx;
  background: transparent; border: 2rpx solid var(--lt-text);
  color: var(--lt-text); font-size: 24rpx; font-weight: bold;
  border-radius: 0; line-height: 86rpx; min-width: 200rpx;
}
.btn-get-code.disabled { opacity: 0.5; color: #999; border-color: #ccc; }

/* 提交按钮 */
.btn-submit {
  width: 100%; height: 120rpx;
  background: var(--lt-text); color: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20rpx), calc(100% - 20rpx) 100%, 0 100%);
  margin-top: 40rpx;
}
.btn-hover { opacity: 0.9; transform: scale(0.98); }
.btn-text { position: relative; z-index: 2; font-size: 40rpx; font-weight: 900; letter-spacing: 6rpx; }
.btn-progress {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--c-green); z-index: 1; transition: width 0.3s ease;
}

.footer { margin-top: 50rpx; text-align: center; font-size: 20rpx; color: #999; line-height: 1.5; }
</style>